<template>
    <div class="main-con storeInfo">
        <!-- 搜索框 -->
        <div class="search-con">
            <div class="search-item">
                <div class="search-item-title">门店编号</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.storeNo" placeholder="请输入门店编号" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">门店名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.storeName" placeholder="请输入门店名称" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">门店类型</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.storeType" placeholder="请选择门店类型">
                        <el-option v-for="item in storeTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">开通渠道</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.channel" placeholder="请选择开通渠道">
                        <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">门店分组</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.groupId" placeholder="请选择门店分组">
                        <el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">打印机绑定状态</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.isBindPrinter" placeholder="请选择打印机绑定状态">
                        <el-option v-for="item in printOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">创建时间</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" v-model="formData.createDate" type="date" placeholder="请选择创建时间"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title"></div>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
            </div>
        </div>

        <!-- 按钮组 -->
        <div class="btn-group-con">
            <el-button size="mini" type="primary" @click="handleExport">导出</el-button>
            <el-button size="mini" type="primary">同步门店</el-button>
        </div>

        <!-- 表格数据 -->
        <div class="table-con" v-loading="loading">
            <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="storeNo" label="门店编号" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="storeName" label="门店名称" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="storeTypeName" label="门店类型" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="addressDetail" label="详细地址" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="longitude" label="经度" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="latitude" label="纬度" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="onlineChannelName" label="开通渠道" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="isBindPrinter" label="打印机绑定" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{scope.row.isBindPrinter == '0' ? '未绑定':'已绑定'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="presaleRate" label="预售比例" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" width="" align="center">
                    <template slot-scope="scope">
                        <div class="handleBtn" v-if="scope.row.accountNo != 'admin'">
                            <span @click="handleUpdate(scope.$index, scope.row)">编辑</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 表格分页 -->
        <div class="pagination-con">
            <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total"
                @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
            </m-pagination>
        </div>
    </div>
</template>

<script>
import { queryStoreInfo } from "@/common/service/storeManagement/storeInfo.js";
import { queryStoreGrouping } from "@/common/service/storeManagement/storeGrouping.js";
import mPagination from "@/components/m-pagination/m-pagination";
import { api } from "@/common/http/index.js";
export default {
    name: "storeInfo",
    data() {
        return {
            // 搜索条件
            formData: {
                storeNo: "", //门店编号
                storeName: "", //门店名称
                storeType: "", //门店类型
                channel: "", //开通渠道
                groupId: "", //门店分组
                isBindPrinter: "", //打印机绑定状态
                createDate: "", //创建时间
                pageNum: 1,
                pageSize: 10
            },
            storeTypeOptions: [
                {
                    value: "1",
                    label: "直营"
                },
                {
                    value: "2",
                    label: "加盟"
                }
            ], //门店类型下拉框数据
            channelOptions: [
                {
                    value: "1",
                    label: "有赞"
                },
                {
                    value: "2",
                    label: "美团"
                },
                {
                    value: "4",
                    label: "京东到家"
                },
                {
                    value: "8",
                    label: "有赞预售"
                },
                {
                    value: "16",
                    label: "饿了么"
                },
                {
                    value: "32",
                    label: "自研商城"
                }
            ], //开通渠道下拉框数据
            groupOptions: [], //门店分组下拉框数据
            printOptions: [
                {
                    value: "0",
                    label: "未绑定"
                },
                {
                    value: "1",
                    label: "已绑定"
                }
            ], //打印机绑定状态下拉框数据
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false //表格加载动画
        };
    },
    created() {
        //初始化表格数据
        this._queryStoreInfo();
        //初始化所有的门店分组
        this._queryAllStoreGroupInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询门店信息表格数据
        _queryStoreInfo() {
            this.loading = true;
            queryStoreInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.list;
                    this.total = res.totalCount;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryStoreInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryStoreInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this._queryStoreInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                storeNo: "",
                storeName: "",
                storeType: "",
                channel: "",
                groupId: "",
                isBindPrinter: "",
                createDate: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryStoreInfo();
        },
        //查询所有的门店分组信息
        _queryAllStoreGroupInfo() {
            var data = {
                pageSize: 100
            };
            queryStoreGrouping(data)
                .then(res => {
                    this.groupOptions = res.content;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------导出操作----------------------------*/
        handleExport() {
            this.UTILS.exportUtil(api.exportstoreInfo, this.formData);
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>